<!--查看详情-->
<template>
  <el-drawer
    size="667px"
    title="查看详情 "
    :visible="visible"
    @close="updateVisible(false)">
    <div class="margin20">
    <div class="flex-align-center m-algin20">
      <span class="color999">任务名称：</span>
      <span class="color000">{{deatil.taskName}}</span>
    </div>
      <el-row :gutter="15" class="width100">
        <el-col :span="12" class="flex-columns">
          <div class="flex-align-center">
            <span class="color999">已选形象：</span>
            <span class="color000">{{deatil.imgName}}</span>
          </div>
          <el-image fit="contain" :src="deatil.image" style="height: 164px;width: 100px;" />
        </el-col>
        <el-col :span="12" class="flex-columns">
          <span class="color999">背景图上传：</span>
          <el-image fit="contain" :src="deatil.backgroundImage" style="height: 127px;margin: 20px 0" />
        </el-col>
      </el-row>
    <div class="fontSize18 color333 m-algin20">作品列表</div>
    <el-row :gutter="15" class="flex-wrap">
      <el-col :span="j % 2 ==0 ? 13 : 11" class="work-list flex-align-center relative" v-for="(i,j) in list" :key="j">
        <!--status:任务执行状态—— 1：等待执行 2：执行中 3：成功 4：失败
        ==3 展示视频图片，并可以播放，否则默认图片 + 提示语-->
        <div class="img-size flex-column">
          <video :src="i.videoUrl" v-if="i.status==3" v-on:mouseover="hover=j"></video>
          <!--悬浮播放按钮-->
          <div class="positive-btn flex" @click.stop="download(i.videoUrl)"  v-if="i.status==3 && hover==j">
            <i class="el-icon-caret-right"></i>
          </div>
          <!--<img :src="i.videoUrl" v-if="i.status==3" />-->
          <icon class="el-icon-loading" v-if="i.status!=3"></icon>
          <!--<img src="@/assets/noVideo.png" v-if="i.status!=3" />-->
          <span v-if="i.status==1">等待执行</span>
          <span v-if="i.status==2">执行中</span>
          <span v-if="i.status==4">失败</span>
        </div>
        <div class="flex-columns space-around">
          <div class="fontSize16">发布作品</div>
          <div class="type-num">D音：<span>{{i.dyCount || 0}}</span>（个）</div>
          <div class="type-num">K手：<span>{{i.ksCount || 0}}</span>（个）</div>
          <div class="type-num">视频号：<span>{{i.sphCount || 0}}</span>（个）</div>
          <div class="type-num">生成时间：{{i.createTime}}</div>
        </div>
        <el-divider direction="vertical" class="divider" v-if="j % 2 ==0"></el-divider>
      </el-col>
    </el-row>
    </div>
  </el-drawer>
</template>

<script>
  import {queryTaskDetail} from "@/api/digitalHumanManagement/taskList";

  export default {
    name: "look-detail",
    props:{
      visible:Boolean
    },
    data()
    {
      return {
        hover: -1,
        deatil:{},
        list:[]
      }
    },
    methods:{
      // 跳转下载视频
      download(url){
        console.log("点击跳转下载视频",url)
        window.open(url)
      },
      show(row){
        queryTaskDetail({
          id:row.id
        })
          .then((data) => {
            this.deatil=data
            this.list=data.finishProducts.length>0 ? data.finishProducts : []
            console.log('查询形象详情',data)
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },
      toVideo(url){
        window.open(url)
      },
      /* 更新 visible */
      updateVisible(value) {
        this.hover=-1 // 隐藏悬浮播放按钮
        this.$emit('update:visible', value);
      },
    }
  }
</script>

<style scoped lang="less">

  .positive-btn{
    z-index: 99;
    width: 26px;
    background: #fff;
    height: 26px;
    border-radius: 50%;
    position: absolute;
    top: 57px;
    left: 44px;
    opacity: 0.7;
    i{
      font-size: 22px;
    }
  }
.work-list{
  margin-bottom: 10px;
  .img-size{
    background-color: #f7f7f7;
    width: 100px;
    height: 140px;
    border-radius: 5px;
    margin-right: 10px;
  }
  video{
    width: 100%;
    height: 100%;
    border-radius: 5px;
  }
  icon{
    font-size: 25px;
    margin-bottom: 10px;
  }
  img{
    width: 100%;
    /*height: 100%;*/
    border-radius: 5px;
  }
  .space-around{
    justify-content: space-around;
    height: 140px;
  }
  .type-num{
      color:#333333;
      font-size: 12px;
      span{
        color:#1E6CEB
      }
  }
}
  .divider{
    background-color: #F0F0F0;
    height: 140px;
    /*margin: 0 20px;*/
    position: absolute;
    right: 30px;
  }
</style>
